<template>
  <!--v-app，有且只有一个-->
  <v-app id="app">
    <!--导航侧栏，clipped属性用于将侧栏置于应用栏下方，drawer用于侧栏的显示和隐藏-->
    <v-navigation-drawer app clipped v-model="drawer">
      <!--左上方的头像、用户名和邮箱的显示-->
      <v-list>
        <v-list-item two-line>
          <!--头像-->
          <v-list-item-avatar>
            <v-img v-if="$store.state.user.icon" :src="$store.state.user.icon" alt="头像"></v-img>
            <v-img v-else src="./assets/logo.png" alt="头像"></v-img>
          </v-list-item-avatar>
          <!--简介-->
          <v-list-item-content>
            <!--用户名-->
            <v-list-item-title v-if="$store.state.user.username">{{ $store.state.user.username }}</v-list-item-title>
            <v-list-item-title v-else>游客</v-list-item-title>
            <!--邮箱-->
            <v-list-item-subtitle v-if="$store.state.user.email">{{ $store.state.user.email }}</v-list-item-subtitle>
            <v-list-item-subtitle v-else>example@mail.com</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
      <!--一条分割线-->
      <v-divider></v-divider>
      <!--导航列表-->
      <v-list nav dense>
        <!--主页-->
        <v-list-item link @click="open('Home')">
          <!--mdi图标，home-->
          <v-list-item-icon>
            <v-icon>mdi-home</v-icon>
          </v-list-item-icon>
          <!--文字说明-->
          <v-list-item-title>主页</v-list-item-title>
        </v-list-item>
      </v-list>
      <!--导航侧栏底部插槽-->
      <template v-slot:append>
        <!--登录按钮-->
        <div v-if="$store.state.user.username === ''" class="pa-2">
          <v-btn block color="primary" @click="open('Login')">登录</v-btn>
        </div>
        <!--注册按钮-->
        <div v-if="$store.state.user.username === ''" class="pa-2">
          <v-btn block color="success" @click="open('Register')">注册</v-btn>
        </div>
        <!--注销按钮，登录成功后才可见-->
        <div v-if="$store.state.user.username !== ''" class="pa-2">
          <v-btn block color="error" @click="logout()">注销</v-btn>
        </div>
      </template>
    </v-navigation-drawer>

    <!--顶部导航栏，clipped-left用于控制导航侧栏在左边-->
    <v-app-bar app clipped-left dense color="blue">
      <!--顶部导航栏左侧的一个小按钮，点击之后会显示或隐藏导航侧栏-->
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" color="white"></v-app-bar-nav-icon>
    </v-app-bar>

    <!--页面主要内容部分，基本上以视图替换的形式体现-->
    <v-main>
      <!--结合v-router，修改index.js文件，可以进行视图的替换-->
      <router-view></router-view>
    </v-main>

    <!--最下方的底部导航栏-->
    <v-bottom-navigation app color="primary">
      <!--gitee源码地址，target属性指定在新标签页打开-->
      <v-btn href="https://gitee.com/kimu" target="_blank">
        <v-icon>mdi-share-variant</v-icon>
      </v-btn>
    </v-bottom-navigation>
  </v-app>
</template>

<script>

export default {
  name: 'App',

  data: () => ({
    // 控制导航侧栏的显示和隐藏
    drawer: true
  }),
  methods: {
    // 通过视图的名字跳转到特定视图，一般用作主页，登录页，注册页等
    open (name) {
      // 需要先判断当前路由名称是否和目标路由一致，如果一致就不跳转
      if (this.$route.name !== name) {
        this.$router.push({
          name: name
        })
      }
    },
    // 注销
    logout () {
      // 清除用户
      this.$store.commit('removeUser')
      // 同时清除token
      this.$store.commit('removeToken')
    }
  },
  created () {
    // 初始化时加载user
    this.$store.commit('loadUser')
  }
}
</script>
